<template>
    <div class="draw-tools">
        <el-card class="tool-panel">
            <template #header>
                <div class="card-header">
                    <span>标绘工具&emsp;</span>
                    <el-button type="danger" size="small" :icon="Delete" @click="handleClear">清除</el-button>
                </div>
            </template>
            <el-radio-group v-model="currentTool" @change="handleToolChange" size="small" :disabled="disabled">
                <el-tooltip content="点" placement="top">
                    <el-radio-button value="Point">
                        <el-icon>
                            <LocationInformation />
                        </el-icon>
                    </el-radio-button>
                </el-tooltip>
                <el-tooltip content="线" placement="top">
                    <el-radio-button value="Polyline">
                        <el-icon>
                            <Connection />
                        </el-icon>
                    </el-radio-button>
                </el-tooltip>
                <el-tooltip content="面" placement="top">
                    <el-radio-button value="Polygon">
                        <el-icon>
                            <Share />
                        </el-icon>
                    </el-radio-button>
                </el-tooltip>
                <el-tooltip content="圆" placement="top">
                    <el-radio-button value="Circle">
                        <el-icon>
                            <EditPen />
                        </el-icon>
                    </el-radio-button>
                </el-tooltip>
            </el-radio-group>
        </el-card>
    </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import {
  LocationInformation,
  Connection,
  Share,
  CloseBold,
  Delete
} from '@element-plus/icons-vue'

const currentTool = ref('')
const emit = defineEmits(['draw-type-change', 'clear'])

const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  }
})

const handleToolChange = (type, event) => {
  currentTool.value = type
  emit('draw-type-change', type)
}

const handleClear = (event) => {
  // 阻止事件冒泡
  event?.stopPropagation()
  
  currentTool.value = ''
  emit('clear')
}

// 添加重置方法
const resetTool = () => {
  currentTool.value = ''
}

// 暴露方法给父组件
defineExpose({
  resetTool
})
</script> 
<style lang="scss" scoped>
.draw-tools {
  padding: vw(5);
}

.tool-button {
  margin: vw(5);
  padding: vw(8) vw(15);
  font-size: vw(14);
}

:deep(.el-button) {
  margin-right: vw(8);
  
  &:last-child {
    margin-right: 0;
  }
}

:deep(.el-icon) {
  font-size: vw(16);
  margin-right: vw(4);
}
</style>